<template>
	<div class="input_area">
		<div class="common">
			<view class="inputText">
				<div class="material_input_text">
					<textarea v-model="inputContent" class="_input" @focus="InputFocus" confirm-type="send" :show-confirm-bar="false" @confirm="sendInputMessage()" placeholder="请输入消息" />
				</div>
				<!-- <div class="addImage" @click="uploadImg">+</div> -->
				<!-- <view class="sendBtn" v-show="sendBtnShow" @click="sendInputMessage()">发送</view> -->
			</view>
		</div>
	</div>
</template>
<script>
import classnames from 'classnames';
import zim from '../../libs/drugSaasTr';
export default {
	components: {
		// uploadFile,
		// emoj
	},
	data() {
		return {
			inputContent: '',
			toolsIndex: 0,
			extendsFunc: false,
			sendBtnShow: true,
		};
	},
	computed: {
		renderExtendsClassname() {
			const { extendsFunc } = this;
			return classnames({
				extends: true,
				['extends-hide']: !extendsFunc,
			});
		},
	},
	methods: {
		uploadImg() {
			const _this = this;
			const u = zim.getApi();
			console.log(u);
			const { $drugstoreUploadFile ,$apipre} = u;
      // #ifdef MP-WEIXIN
			wx.chooseMedia({
				count: 1,
				mediaType: ['image'],

				success(res) {
					const tempFilePath = res.tempFiles[0].tempFilePath;
					wx.uploadFile({
            url: `${$apipre}${$drugstoreUploadFile}`,
						filePath: tempFilePath,
						name: 'fileStream',
						formData: {
							uploadParam: JSON.stringify({
								scene: 'im_file',
								appName: 'zim',
							}),
						},
						success(res) {
							const resdata = res.data;
							const d = JSON.parse(resdata);
							const {
								result: { data },
							} = d;
							const sendData = { fileUrl: data.url, fileName: data.fileName };
							_this.$emit('sendImageMessage', sendData);
						},
					});
				},
			});
      // #endif
      // #ifdef MP-ALIPAY
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        // sourceType: ['album'], //从相册选择
        success: (chooseImageRes) => {
          console.log(chooseImageRes,'chooseImageRes')
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: `${$apipre}${$drugstoreUploadFile}`, //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'fileStream',
            formData: {
              uploadParam: JSON.stringify({
                scene: 'im_file',
                appName: 'zim',
              }),
            },
            success: (res) => {
              console.log(res,'res')
              const resdata = res.data;
              const d = JSON.parse(resdata);
              const {
                result: { data },
              } = d;
              const sendData = { fileUrl: data.url, fileName: data.fileName };
              _this.$emit('sendImageMessage', sendData);
            },
            fail(e){
              console.log(e,'e')
            }
          });
        }
      });
      //  #endif
		},
		sendVideoMessage(files) {
			this.$emit('sendVideoMessage', files);
		},
		sendImageMessage(files) {
			this.$emit('sendImageMessage', files);
		},
		scrollBottom() {
			this.$emit('scrollBottom');
		},
		InputFocus() {
			this.emojiShow = false;
			this.closeExtends();
		},
		selectEmoji(emoj) {
			const { inputContent } = this;
			this.inputContent = `${inputContent} ${emoj}`;
		},
		openExtends() {
			this.extendsFunc = true;
			this.scrollBottom();
		},
		closeExtends() {
			this.extendsFunc = false;
		},
		clearInput() {
			this.inputContent = '';
		},

		openExtends_tools(index) {
			const { toolsIndex } = this;
			if (toolsIndex == index) {
				this.toolsIndex = 0;
				this.closeExtends();
			} else {
				this.toolsIndex = index;
				this.openExtends();
				this.scrollBottom();
			}
		},
		sendInputMessage() {
			this.$emit('sendInputMessage', this.inputContent);
		},
	},
};
</script>
<style lang="scss" scoped>
.input_area {
	// width: 100%;
	background: #f9f9f9;
	padding: 12px 8px;
	.addImage {
		position: absolute;
		top: -8px;
		right: 5px;
		// top: -45px;
		// right: 0;
		font-size: 30px;
		font-weight: bold;
    z-index: 10;
	}
	.common {
		width: 100%;
    position: relative;
		.sendBtn {
			padding: 3px 20px;
			background: #1bbf75;
			color: #fff;
			font-size: 12px;
			word-break: keep-all;
			display: flex;
			align-items: center;
			border-radius: 4px;
		}
		.inputText {
			width: 100%;
			display: flex;
			//overflow: hidden;
			.inputText_box {
				flex: 1;
				margin-right: 16px;
			}
		}
	}
}
.material_input_text {
	width: 100%;
	//display: flex;
	flex: 1;
	._input {
		display: block;
		flex: 1;
		line-height: 21px;
		height: 41px;
		color: #333;
		background: #fff;
		border: unset;
		padding: 10px 2%;
		box-sizing: border-box;
		font-size: 15px;
		outline: none;
		resize: none;
		border-radius: 4px;
		width: 100%
	}
}
</style>
